import React, { Suspense } from 'react'
import { Route, Switch, withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react'
import { FullScreenLoading } from '@/components'
import routes from './routes'

import { createTheme } from '@material-ui/core/styles'
import { ThemeProvider } from '@material-ui/styles'
import { blue } from '@material-ui/core/colors'

const theme = createTheme({
  palette: {
    primary: {
      // Purple and green play nicely together.
      main: blue[500],
    },
  },
})

function App(props) {
  props.historyStore.setHistory(props.history)

  return (
    <>
      <ThemeProvider theme={theme}>
        <Suspense fallback={<FullScreenLoading loading />}>
          <Switch>
            {routes.map(({ path, component, ...rest }, index) => (
              <Route key={index} path={path} component={component} {...rest} />
            ))}
          </Switch>
        </Suspense>

        <FullScreenLoading loading={props.request.isFetching} />
      </ThemeProvider>
    </>
  )
}

export default withRouter(inject('request', 'historyStore')(observer(App)))
